<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟系统</title>
    <style>
        .tabs {
            display: flex;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .tab {
            padding: 10px 20px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            border-bottom: none;
            transition: background-color 0.3s;
        } 
        .tab:hover {
            background-color: #ddd;
        }
        .active {
            background-color: white;
            border-top: 2px solid #007BFF;
            font-weight: bold;
        }
        .tab-content {
            border: 1px solid #ccc;
            padding: 20px;
            display: none;
        }
        .show {
            display: block;
        }
        
    </style>
</head>
<body>
    <div class="tabs">
        <div class="tab" onclick="showTab('tab2')">Tab 2</div>
        <div class="tab active" onclick="showTab('channelTab')">通道</div>
    </div>
    <div id="channelTab" class="tab-content show">
        <h2>Channel</h2>
        <p>This is the content of Channel</p>
    </div>
    <div id="tab2" class="tab-content">
        <h2>Content for Tab 2</h2>
        <p>This is the content of Tab 2.</p>
    </div>
    

    <script>
        function showTab(tabId) {
            // 隐藏所有选项卡内容
            const contents = document.querySelectorAll('.tab-content');
            contents.forEach(content => content.classList.remove('show'));

            // 移除所有选项卡的 active 类
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));

            // 显示当前选中的选项卡内容
            document.getElementById(tabId).classList.add('show');
            // 设置当前选中的选项卡为 active
            event.currentTarget.classList.add('active');
        }
    </script>
</body>
</html>